<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/hall.css">
</head>
<body>
    <div class="nav">五子棋</div>
    <div class="container">
        <div class="dialog">
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 开始匹配 -->
            <button id="match" onclick="findMatch()">开始匹配</button>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        $.ajax({
            type: 'post',
            url: '/user/getLoginUser',
            success: function(result) {
                if(result.username != null) {
                    let screen = document.querySelector("#screen");
                    screen.innerHTML = '当前玩家：' + result.username + '<br>天梯积分：' + 
                    result.score + '<br>比赛场次：' + result.totalCount + 
                    '<br>获胜场次：' + result.winCount;
                }else{
                    alert("获取用户信息失败，请重新登录");
                    location.replace("/login.html");
                }
            },
            error: function() {
                alert("获取用户信息失败");
            }
        });
        
        let webSocket = new WebSocket('ws://127.0.0.1:8080/findMatch');

        webSocket.onopen = function() {
            console.log("连接成功");
        }
        webSocket.onclose = function() {
            console.log("连接关闭");
            //location.assign("/login.html");
        }
        webSocket.onerror = function() {
            console.log("error");
        }

        //页面关闭时释放webSocket
        window.onbeforeunload = function() {
            webSocket.close();
        }

        //处理服务器发送的消息
        webSocket.onmessage = function(e) {
            //解析json字符串为js对象
            let resp = JSON.parse(e.data);
            if(resp.message == 'startMatch') {
                //开始匹配请求发送成功正在匹配
                //替换按钮描述
                $("#match").text("匹配中...");
            }else if(resp.message == 'stopMatch') {
                //取消匹配请求发送成功已取消匹配
                //替换按钮描述
                $("#match").text("开始匹配");
            }else if(resp.message == 'success'){
                //匹配成功
                console.log("匹配成功! 进入游戏房间");
                location.replace("/room.html");
                console.log("进入游戏房间");
            }else if(resp.message == 'repeat_login') {
                alert("该账号已在别处登录");
                console.log("该账号已在别处登录");
                location.replace("/login.html");
            }else if(resp.message == 'no_login') {
                alert("当前还未登录");
                console.log("当前还未登录");
                location.replace("/login.html");
            }else {
                alert("非法响应 errMsg:" + resp.errMsg);
            }

        }

        function findMatch() {
            //检查websocket连接
            if(webSocket.readyState == webSocket.OPEN) {
                if($("#match").text() == '开始匹配') {
                    console.log("开始匹配");
                    webSocket.send(JSON.stringify({
                        message: 'startMatch' //约定startMatch表示开始匹配
                    }));
                }else if($("#match").text() == '匹配中...') {
                    console.log("停止匹配");
                    webSocket.send(JSON.stringify({
                        message: 'stopMatch' //约定stopMatch表示停止匹配
                    }));
                }
            }else{
                alert("连接断开，请重新登录");
                location.replace("/login.html");
            }
        }

    </script>
</body>
</html>